<%--
  Created by IntelliJ IDEA.
  User: d6416
  Date: 2018/11/24
  Time: 13:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String _id=request.getParameter("_");
%>

<style>
    #cropperPanelBody{
        height: 200px;
        padding: 0;
    }
    #cropperContainer{
        padding: 0;
        height: 100%;
    }
    .img-preview{
        overflow: hidden;
        margin: 5px 40px;
    }
</style>

<div class="panel">
    <div id="cropperPanelBody" class="panel-body">
        <div id="cropperContainer" class="col-md-7">
            <img id="logoImg" src="${logoUrl}" style="height: 100%;width: auto">
        </div>
        <div class="col-md-5" style="padding-right: 0">
            <label id="uploadNewImgBtn" for="inputImage" class="btn btn-block btn-primary" style="margin-bottom: 15px">选择新图片</label>
            <input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
            <div class="img-preview img-lg img-circle pull-left"></div>
            <div class="img-preview img-lg pull-left"></div>
        </div>
    </div>
</div>

<script>

    var cropper;

    $(function(){

        //参数文档
        //https://blog.csdn.net/weixin_38023551/article/details/78792400

        var image = document.getElementById('logoImg');
        cropper = new Cropper(image, {
            viewMode : 2, //cropper的视图模式
            aspectRatio: 1, //设置剪裁容器的比例
            preview : '.img-preview', //添加额外的元素（容器）的预览
            autoCropArea : 0.8, //初始化时自动剪裁所占的比例
            crop: function(data) { // 当改变剪裁容器或图片时的事件函数
                console.log(data);
            }
        });


        //选择新图片
        var URL = window.URL || window.webkitURL, blobURL;
        if (URL) {
            $("#inputImage").change(function () {
                var files = this.files, file;
                if (files && files.length) {
                    file = files[0];
                    if (/^image\/\w+$/.test(file.type)) {
                        blobURL = URL.createObjectURL(file);
                        cropper.reset(true);
                        cropper.replace(blobURL);
                        $("#inputImage").val('');
                    } else {
                        __toastr_error('请选择一张图片');
                    }
                }
            });
        } else {
            $("#inputImage").parent().remove();
        }

    });

    function fn_save_logo(callback){
        var cas=cropper.getCroppedCanvas();
        cas.toBlob(function (blob) {
            var formData = new FormData();
            formData.append('logoFile', blob);
            formData.append('logoName', "${logoName}");

            $.ajax({
                type:'POST',
                url:"<%=path%>/main/file/uploadLogo",
                data:formData,
                dataType : 'json',
                processData:false,
                contentType : false,
                mimeType:"multipart/form-data",
                success:function(data){
                    callback(data);
                    __toastr(data);
                },
                error : function(data){
                    callback(data);
                }
            });
        })
    }




</script>